<nz-modal [nzStyle]="{ top: '10px' }" [(nzVisible)]="nzVisible" nzTitle="知识库维护" (nzOnCancel)="onHandleCancel()" (nzOnOk)="onHandleOk()" nzWidth="1000">
   
   <div class="gutter-example" >
      <div nz-row nzGutter="16">
        <div nz-col class="gutter-row" nzSpan="12" style="padding-bottom:10px;">
          <div class="gutter-box">
              <h3 nz-title style="margin-bottom:10px;">{{ dataZsk.JBXX.DAD031 }}</h3>              
          </div>          
        </div>       

        
        <div nz-col class="gutter-row" nzSpan="12" >
          <div class="gutter-box" style="text-align:right;right-padding:30px;padding-bottom:10px;">
              <button nz-button nzType="primary"><i nz-icon nzType="file-done"  style="font-size:16px;font-weight:bold;"></i>收件</button>
          </div>
        </div>        
      </div>
      <div nz-row nzGutter="4" style="background-color:#F8F8F8;">
        <div nz-col class="gutter-row" nzSpan="4" style="padding-top:10px;height:400px;">
          <div style="padding-left:5px;padding-right:5px;">
            <nz-anchor [nzTarget]="target" [nzAffix]="false" [nzShowInkInFixed]="true" style="height:350px;">
              <nz-link nzHref="#jbxx" nzTitle="基本信息" style="font-size:14px;"></nz-link>
              <nz-link nzHref="#clxx" nzTitle="材料信息" style="font-size:14px;"></nz-link>
              <nz-link nzHref="#sqtj" nzTitle="申请条件" style="font-size:14px;"></nz-link>
              <nz-link nzHref="#bslc" nzTitle="办事流程" style="font-size:14px;"></nz-link>
            </nz-anchor>
          </div>
        </div>
        <div nz-col class="gutter-row" nzSpan="20" style="padding-top:10px;">
          <div class="scrollable-container" #target style="background-color:#ffffff;padding-left:5px;padding-right:5px;">
            <div class="title_div">
              <span id="jbxx" class="zsk_title">基本信息</span>
              <nz-tag style="margin-left:10px;margin-right:20px;">{{dataZsk.JBXX.DAD011 | dicpipe:"DAD011"}}</nz-tag>
              <nz-badge nzStatus="processing" nzText="{{ dataZsk.JBXX.DAD032 | dicpipe:'DAD032'}}"></nz-badge>
            </div>
            <nz-descriptions  nzBordered>              
              <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Billing Mode">Prepaid</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Automatic Renewal">YES</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Order Time">
                2018-04-24 18:00:00
              </nz-descriptions-item>
              <nz-descriptions-item nzTitle="Usage Time" [nzSpan]="2">
                2018-04-24 18:00:00 To 2019-04-24 18:00:00
              </nz-descriptions-item>
              <nz-descriptions-item nzTitle="Status" [nzSpan]="3">
                
              </nz-descriptions-item>
              <nz-descriptions-item nzTitle="Negotiated Amount">$80.00</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Official Receipts">$60.00</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Config Info">
                Data disk type: MongoDB
                <br />
                Database version: 3.4
                <br />
                Package: dds.mongo.mid
                <br />
                Storage space: 10 GB
                <br />
                Replication_factor:3
                <br />
                Region: East China 1<br />
              </nz-descriptions-item>
            </nz-descriptions>
              <h2 id="clxx">材料信息</h2>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              <h2 id="sqtj">申请条件</h2>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              <h2 id="bslc">办事流程</h2>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>

              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>

              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>

              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>
              AAA<br>

              AAA<br>
              AAA<br>
          </div>
        </div>
        
      </div>
    </div>
   
   
</nz-modal>